<template>
  <div id="app">
    <!-- v-show -->
    <!-- isMan为true的时候，显示男孩 -->
    <!-- <span v-show="isMan">男孩</span> -->
    <!-- isMan为false的时候，显示女孩 -->
    <!-- <span v-show="!isMan">女孩</span> -->

    <!-- v-if -->
    <!-- isMan为true的时候，显示男孩 -->
    <span v-if="isMan">男孩</span>
    <!-- isMan为false的时候，显示女孩 -->
    <span v-else="!isMan">女孩</span>
    <button @click="handleToggelGender">点击切换性别</button>
  </div>
</template>

<script>
export default {
  name: "App",
  // 先定义好数据
  data() {
    return {
      // 定义好一个数据，用来区分性别
      isMan: true,
    };
  },
  methods: {
    handleToggelGender() {
      // 对上一次的值进行取反
      this.isMan = !this.isMan;
    },
  },
};
</script>
